/**
 * 基础菜单 商品管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>题库管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="searchData.name" placeholder="输入题库名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="big" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="big" type="success" icon="el-icon-plus" @click="handleEdit()">添加</el-button>
      </el-form-item>

    </el-form>
    <!--列表-->
    <el-table size="small" :data="myListData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column sortable prop="bname" label="题库名称" width="100">
      </el-table-column>
      <el-table-column sortable prop="queNum" label="总提数" width="100">
      </el-table-column>
      <el-table-column sortable prop="singliNum" label="单选题数" width="100">
      </el-table-column>
      <el-table-column sortable prop="multipleNum" label="多选题数" width="100">
      </el-table-column>
      <el-table-column sortable prop="judgeNum" label="判断题数" width="100">
      </el-table-column>
      <el-table-column sortable prop="packNum" label="填空题数" width="100">
      </el-table-column>
       <el-table-column sortable prop="answerNum" label="问答题数" width="100">
      </el-table-column>
      <el-table-column sortable prop="createTime" label="创建时间" width="200">
        <!-- <template slot-scope="scope">
          <div>{{scope.row.editTime|timestampToTime}}</div>
        </template> -->
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
           <el-tooltip  effect="dark" content="编辑" placement="bottom">
            <el-button
            size="big"
            type="warning"
           @click="handleEdit(scope.$index, scope.row)"
            icon="el-icon-edit"
          ></el-button>
          </el-tooltip>
           <!-- <el-button size="mini"  @click="handleLook(scope.$index, scope.row)" >查看</el-button> -->
            <el-tooltip  effect="dark" content="查看详情" placement="bottom">
             <el-button
            size="big"
            type="success"
            @click="handleLook(scope.$index, scope.row)" 
            icon="el-icon-view"
          ></el-button>
          </el-tooltip>
          <!-- <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button> -->
           <el-tooltip  effect="dark" content="删除" placement="bottom">
            <el-button
            size="big"
            type="danger"
           @click="deleteUser(scope.$index, scope.row)"
            icon="el-icon-delete"
          ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @call="callFather"></Pagination>
    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="题库名称" prop="deptName">
          <el-input size="small" v-model="editForm.bname" auto-complete="off" placeholder="请输入题库名称"></el-input>
        </el-form-item>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

   


 <!-- 查看页面 -->

       <el-dialog :title="title" :visible.sync="look" width="60%" @click="closeDialog">
      <div>
    <!-- 搜索筛选 -->
     <el-form :inline="true" :model="formInline" class="user-search">
       <el-select v-model="value" clearable placeholder="请选择题型" @change="xia()" >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <!-- 试题标签 -->
  <el-select v-model="valueid" clearable placeholder="请选择试题标签" @change="xuantag()" >
    <el-option
      v-for="item in tag"
      :key="item.id"
      :label="item.tagName"
      :value="item.id">
    </el-option>
  </el-select>
      <el-form-item label="">
        <el-input size="small" v-model="quesData.name" placeholder="输入试题名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="big" type="primary" icon="el-icon-search" @click="searchQue">搜索</el-button>
        <el-button size="big" type="warning" icon="el-icon-paperclip" @click="gotoTag">跳转</el-button>
        <!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit()">添加</el-button> -->
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="quesListData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      
      <el-table-column sortable prop="title" label="题干" width="200">
      </el-table-column>
      <el-table-column sortable prop="tag.tagName" label="试题标签" width="100">
      </el-table-column>
      <el-table-column sortable prop="analysis" label="答案解析" width="200">
      </el-table-column>
      <el-table-column sortable prop="bank.bname" label="题库" width="100">
      </el-table-column>
      <el-table-column sortable prop="type" label="题型" width="100">
      </el-table-column>
      <el-table-column sortable prop="createTime" label="创建时间" width="200">
        <!-- <template slot-scope="scope">
          <div>{{scope.row.editTime|timestampToTime}}</div>
        </template> -->
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
           <!-- <el-button size="mini"  @click="quesInfom(scope.$index, scope.row)">查看</el-button> -->
          <el-button size="mini" type="danger" @click="deleteQue(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
     <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @call="callQues"></Pagination>
    <!-- 编辑界面 -->
  


  </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" :loading="loading" class="title" @click="closeDialog">确定</el-button>
      </div>


      
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import axios from 'axios';
export default {
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      look:false,//查看页面影藏
      title: '添加',
        type:false,//为选择题的时候出现
      answertype:false,//为判断题的时候出现
      editForm: {
         bname:'',
        creator:null,
        updator:null,
        id:''
      },
      user:[],
  options: [{
         value: 1,
          label: '单选题'
        }, {
          value: 2,
          label: '多选题'
        }, {
          value: 3,
          label: '判断题'
        }, {
          value: 4,
          label: '填空题'
        }, {
          value: 5,
          label: '问答题'
        }],
        value: '',
         tag:[],//题型
    
       valueid:'',
      // rules表单验证
      rules: {
        bname: [
          { required: true, message: '请输入部门名称', trigger: 'blur' }
        ],
        creator: [{ required: true, message: '请输入部门代码', trigger: 'blur' }]
      },
      formInline: {
        page: 1,
        limit: 10,
        varLable: '',
        varName: '',
        token: localStorage.getItem('logintoken')
      },
      //搜索框对应的model
        searchData:{
          name:""
        },

        //题目搜索框对应的model
        quesData:{
          name:"",
          tagId:'',
          type:'',
          bankId:''
        }, 
      // 删除部门
      seletedata: {
        ids: '',
        token: localStorage.getItem('logintoken')
      },
      userparm: [], //搜索权限
      listData: [], //用户数据
       myListData: [], //我们从数据库查出来的页面数据
       quesListData:[],//题目数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      }
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getBank();
    this.user = JSON.parse(localStorage.getItem('userdata'));
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取公司列表
    getdata(parameter) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 5,
        
      }
      this.loading = false
      this.listData = res.data
      this.pageparm.currentPage = this.formInline.page
      this.pageparm.pageSize = this.formInline.limit
      this.pageparm.total = res.count
      // 模拟数据结束
    },
//跳转试题页面
    gotoTag(){
      this.$router.push({path:'./tag',query:{setid:this.quesData.bankId}});
     },

    xia(){
        this.quesData.type=this.value
    },
      xuantag(){
        this.quesData.tagId=this.valueid;
      
    },
    getBank(){
        this.$axios
          .get("/api/bank/selectAll", {
            params: {
              bname:this.searchData.name,
              page: this.pageparm.currentPage,
              pageSize: this.pageparm.pageSize
            },
          })
          .then((res) => {
            console.log(res);
            this.myListData = res.data.list;
            this.pageparm.total = res.data.total;
          })
          .catch((err) => {});
    },
    getTag(){
          this.$axios
          .get("/api/tag/findTag")
          .then((res) => {
            console.log(res);
            this.tag = res.data;
          })
          .catch((err) => {});
    },
    //根据题库id获取所有题目
     getQues(){
        this.$axios
          .get("/api/question/selectAll", {
            params: {
              title:this.quesData.name,
              type:this.quesData.type,
              tagId:this.quesData.tagId,
              bankId:this.quesData.bankId,
              page: this.pageparm.currentPage,
              pageSize: this.pageparm.pageSize
            },
          })
          .then((res) => {
            console.log(res);
            this.quesListData = res.data.list;
            this.pageparm.total = res.data.total;
             this.quesListData.forEach((s)=>{
              if(s.type==1){
                s.type="单选题"
              }else if(s.type==2){
                s.type="多选题"
              }else if(s.type==3){
                s.type="判断题"
              }else if(s.type==4){
                s.type="填空题"
              }else if(s.type==5){
                s.type="问答题"
              }
            })
          })
          .catch((err) => {});
     },
     //查看试题
      quesInfom: function(index, row) {
          this.$axios
          .get("/api/question/findQueById", {
            params: {
              id:row.id
            },
          })
          .then((res) => {
            console.log(res);
            this.questionInfom = res.data
            
            if(res.data.type==3){
              this.answertype=true
              this.type=false
            }else{
              this.answertype=false
              this.type=true
            }
          })
          .catch((err) => {});
        this.question = true
        this.title = '试题信息'
        this.editForm.title = row.title
    },
    // 分页插件事件
    callFather(parm) {
       this.formInline.page = parm.currentPage;
        this.formInline.limit = parm.pageSize;
        this.pageparm.currentPage = parm.currentPage;
        this.pageparm.pageSize = parm.pageSize;
        this.getBank();
    },
    callQues(parm) {
       this.formInline.page = parm.currentPage;
        this.formInline.limit = parm.pageSize;
        this.pageparm.currentPage = parm.currentPage;
        this.pageparm.pageSize = parm.pageSize;
        this.getQues();
    },
    // 搜索事件
    search() {
      this.pageparm.currentPage = 1;
       this.getBank()
    },
     // 搜索事件
    searchQue() {
      this.pageparm.currentPage = 1;
       this.getQues()
    },
    //显示编辑界面
    handleEdit: function(index, row) {
      this.editFormVisible = true
      if (row != undefined && row != 'undefined') {
        this.title = '修改'
        this.editForm.id = row.id
        this.editForm.bname = row.bname
        this.editForm.creator = row.creator
      } else {
        this.title = '添加'
        this.editForm.bname = ''
        this.editForm.id = ''
        this.editForm.creator = ''
      }
    },
    //显示查看界面
    handleLook: function(index, row) {
       this.title = '试题列表'
      this.look = true
      this.quesData.bankId=row.id
    this.getQues();
    this.getTag();
    },
    // 编辑、增加页面保存方法
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
         if(this.title === "添加"){
           this.editForm.creator=this.user.id
              //添加
              //换成自己的axios方法  insert
              this.$axios
              .post('/api/bank/addBank',this.editForm)
              .then((res) => {
                console.log(res)
                if(res.data=='success'){
                //隐藏弹窗
                  this.editFormVisible = false;
                  this.loading = false;
                  //关闭弹窗后，重新获得列表数据
                  this.getBank();
                  this.$message({
                    type: "success",
                    message: "题库新增成功！",
                  });
                }else{
                   this.editFormVisible = false;
                  this.loading = false;
                  this.$message.error("题库添加失败，名称可能重复！");
                }
              })
                .catch((err) => {
                  this.editFormVisible = false;
                  this.loading = false;
                  this.$message.error("题库添加失败，请稍后再试！");
                });
            }else{
              //更新
                 this.editForm. updator=this.user.id
             
              this.$axios
              .post('/api/bank/updateBank',this.editForm)
              .then((res) => {
                //隐藏弹窗
                  this.editFormVisible = false;
                  this.loading = false;
                  //关闭弹窗后，重新获得列表数据
                   this.getBank();
                  this.$message({
                    type: "success",
                    message: "题库修改成功！",
                  });
              })
                .catch((err) => {
                  this.editFormVisible = false;
                  this.loading = false;
                  this.$message.error("用户修改失败，请稍后再试！");
                });

            }
        } else {
          return false
        }
      })
    },
     // 删除公司
    deleteUser(index, row) {
      this.$confirm('确定要删除吗?题库的删除需谨慎哦', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          
          this.$axios
          .get("/api/bank/delBank", {
            params: {
              id:row.id
            },
          })
          .then((res) => {
            this.$message({
                    type: "success",
                    message: "题库删除成功！",
                  });
             this.getBank();
             
          })
          .catch((err) => {
             this.loading = false
               this.$message.error('试题删除失败，请稍后再试！')
          });
          
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
     // 删除试题
    deleteQue(index, row) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          
          this.$axios
          .get("/api/question/delQueById", {
            params: {
              id:row.id
            },
          })
          .then((res) => {
             alert("删除成功")
             this.getQues();
             this.getTag();
            this.getBank();
          })
          .catch((err) => {});
         
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
       this.look = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 